<template>
  <div v-loading="Loading">
    <aside>
      首先在文章管理中，设置聚焦文章、推荐文章和置顶文章。然后通过拖动列表，调节推荐博客的显示的优先级
      <br />聚焦文章：首页聚焦
      <br />推荐文章：详情页右侧
      <br />置顶文章：首页列表置顶
    </aside>
    <div class="components-container board">
      <Kanban :key="1" :list="list1" class="kanban first" header-text="聚焦文章" @change="change" />
      <Kanban :key="2" :list="list2" class="kanban second" header-text="推荐文章" @change="change" />
      <Kanban :key="3" :list="list3" class="kanban third" header-text="置顶文章" @change="change" />
      <!-- <Kanban :key="4" :list="list4" class="kanban fourth" header-text="四级推荐" @change="change" /> -->
    </div>
  </div>
</template>
<script>
import Kanban from "@/components/Kanban";
import { getRecommendList, editBatchBlog } from "@/api/blog";
export default {
  components: {
    Kanban
  },
  data() {
    return {
      Loading: true,
      list1: [], //聚焦
      list2: [], //推荐文章
      list3: [], //置顶文章
    };
  },
  created() {
    this.levelBlogList(1)
    this.levelBlogList(2)
    this.isTopBlogList()
  },
  methods: {
    levelBlogList(level) {
      var params = {};
      params.levelKeyword = level;
      params.currentPage = 1;
      params.pageSize = 10;
      params.useSort = 1;
      this.Loading = true;
      getRecommendList(params).then(response => {
        switch (level) {
          case 1: {
            this.list1 = response.data.records;
          }; break;
          case 2: {
            this.list2 = response.data.records;
          }; break;
        }
        this.Loading = false;
      });
    },
    isTopBlogList() {
      var params = {};
      params.isTop = 1;
      params.currentPage = 1;
      params.pageSize = 10;
      params.useSort = 1;
      this.Loading = true;
      getRecommendList(params).then(response => {
        this.list3 = response.data.records;
        this.Loading = false;
      });
    },
    change(list) {
      for (var a = 0; a < list.length; a++) {
        list[a].sort = list.length - a;
      }
      this.$store.dispatch('app/setLoading', true);
      editBatchBlog(list).then(response => {
        this.$notify({
          title: '成功',
          message: response.data,
          type: 'success'
        });
      });
    }
  },
};
</script>
<style lang="scss">
aside {
  background: #eef1f6;
  padding: 8px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}
.board {
  width: 100%;
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: flex-start;
}
.kanban {
  &.first {
    .board-column-header {
      background: #409eff;
    }
  }

  &.second {
    .board-column-header {
      background: #e6a23c;
    }
  }

  &.third {
    .board-column-header {
      background: #f56c6c;
    }
  }

  &.fourth {
    .board-column-header {
      background: #67c23a;
    }
  }
}
</style>
